<template>
  <smart-table
    :title="roleTitle"
    :formList="roleFormList"
    :selectUrl="roleSelectUrl"
    :insertUrl="roleInsertUrl"
    :updateUrl="roleUpdateUrl"
    :deleteUrl="roleDeleteUrl"
    :exportExcelUrl="roleExportUrl"
    :importExcelUrl="roleImportUrl"
    :tableColumns="roleTableColumns"
    :formButtonCtl="roleFormButtonCtl"
    :formRules="roleFormRules"
    :maxOptionButtonCount="5">
    <template slot="table-button" slot-scope="row">
      <el-button type="warning" icon="el-icon-connection" @click="showBindDialog(row.row)">绑定</el-button>
    </template>
    <template slot="dialog-custom-form">
      <el-dialog :visible.sync="bindDialogVisible" width="50%" center>
        <div class="title" slot="title">当前选中角色:{{ currentRole.name }}</div>
        <el-tree
          ref="permissionTreeOfRole"
          :data="permissionList"
          default-expand-all
          show-checkbox
          node-key="id"
          auto-expand-parent
          :props="{
            children: 'children',
            label: 'title',
          }">
        </el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button type="default" @click="bindDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="bindPermission(currentRole.id)">绑定</el-button>
        </div>
      </el-dialog>
    </template>
  </smart-table>
</template>

<script>
export default {
  name: 'Role',
  data() {
    return {
      //绑定弹窗
      bindDialogVisible: false,
      //当前角色
      currentRole: {},
      //所有的权限列表
      permissionList: [],
      //原始的角色权限列表
      oldPermission: [],
      //主题
      roleTitle: '角色',
      //表单列表
      roleFormList: [
        {
          title: '角色名',
          name: 'name',
          type: 'input',
          width: 80,
        },
      ],
      //角色查询路径
      roleSelectUrl: 'role/lookRole',
      //角色新增路径
      roleInsertUrl: 'role/insertOneRole',
      //角色更新路径
      roleUpdateUrl: 'role/updateOneRole',
      //角色删除路径
      roleDeleteUrl: 'role/deleteRoles',
      //导出路径
      roleExportUrl: '/userService/role/export',
      //导入路径
      roleImportUrl: '/userService/role/import',
      //表格列
      roleTableColumns: [
        {
          title: '角色名',
          name: 'name',
        },
        {
          title: '创建时间',
          name: 'createTime',
          width: 180,
        },
        {
          title: '修改时间',
          name: 'updateTime',
          width: 180,
        },
      ],
      //表单按钮控制
      roleFormButtonCtl: {
        detailButton: false,
      },
      //表单校验
      roleFormRules: {
        name: [
          {
            required: true,
            message: '角色名不得为空!',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  created() {
    this.lookAllPermission()
  },
  methods: {
    lookAllPermission() {
      //获取所有权限
      this.$store.dispatch('permission/lookAllPermission', {}).then((response) => {
        this.permissionList = response.data
      })
    },
    //显示绑定弹窗
    showBindDialog(item) {
      this.bindDialogVisible = true
      this.currentRole = item
      this.initBindDialog(item)
    },
    //初始化绑定弹窗
    initBindDialog(item) {
      //获取当前角色绑定的权限列表
      this.$store.dispatch('permission/lookPermissionFromRole', item.id).then((response) => {
        //当前权限数据
        this.$refs.permissionTreeOfRole.setCheckedKeys(response.data)
        //复制列表数据
        this.oldPermission = response.data
      })
    },
    //绑定权限
    bindPermission(id) {
      //获取当前权限数据
      var newPermission = this.$refs.permissionTreeOfRole.getCheckedKeys()
      //新增的列表
      var addList = newPermission.filter((v) => !this.oldPermission.includes(v))
      //新增的列表
      var deleteList = this.oldPermission.filter((v) => !newPermission.includes(v))
      //新增列表
      if (addList.length > 0) {
        //映射条件
        var addMap = {}
        addMap[id] = addList
        this.$store.dispatch('role/bindPermission', addMap).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: `绑定权限成功!`,
              showClose: true,
            })
          }
        })
      }
      //删除列表
      if (deleteList.length > 0) {
        //映射条件
        var deleteMap = {}
        deleteMap[id] = deleteList
        this.$store.dispatch('role/unbindPermission', deleteMap).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: `解绑权限成功!`,
              showClose: true,
            })
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .title {
  text-align: center;
  font-size: large;
  color: red;
}
.el-transfer {
  margin: auto;
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
  .el-dialog__body {
    max-height: 70vh;
    overflow: auto;
    .el-form-item {
      width: 100%;
    }
  }
}
</style>
